﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <!-- Title -->
    <title>Home</title>

    <!-- ================================================================
        ***Favicon***
    ================================================================= -->

    <link rel="shortcut icon" type="image/png" href="images/fevicon.png">

    <!-- ================================================================
        ***CSS File***
    ================================================================= -->
    <!-- ================= *** Google Font-Poppins *** ======================= -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">

    <!-- ================= *** Animate CSS *** ======================= -->
    <link href="css/animate.min.css" rel="stylesheet" type="text/css">

    <!-- ================= *** Bootstrap CSS *** ===================== -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

    <!-- ================= *** Font-awesome CSS *** ================== -->
    <link href="css/hover-min.css" rel="stylesheet" type="text/css">

    <!-- ================= *** icofont CSS *** ======================= -->
    <link href="css/icofont.css" rel="stylesheet" type="text/css">

    <!-- ================= *** Owl Carousel CSS *** ================== -->
    <link href="css/owl.carousel.css" rel="stylesheet" type="text/css">

    <!-- ================= *** Main CSS *** ========================== -->

    <link href="css/custom/style.css?v=1" rel="stylesheet" type="text/css">

    <!--树形控件-->

    <link rel="stylesheet" type="text/css" href="css/treestyle.css" />
    <link rel="stylesheet" type="text/css" href="css/treebootstrap.min.css" />
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <!--水波-->
    <style>
        .loading {
            text-transform: uppercase;
            font-family: 'Cabin Condensed', sans-serif;
            font-weight: bold;
            font-size: 100pt;
            text-align: center;
            height: 120px;
            line-height: 110px;
            vertical-align: bottom;
            position: absolute;
            left: 0;
            right: 0px;
            top: 200px;
            bottom: 0;
            display: block;
        }

        .loading-2 {
            top: 300px;
            width: 473px;
            height: 97px;
            font-size: 0;
            background: rgba(255, 255, 255, 0.06);
            margin: 0 auto;
        }

        .ff {
            position: absolute;
            font-size: 12pt;
            top: -20px;
            color: wheat;
            line-height: 12pt;
        }

        .loading-2-text {
            background-image: url("css/c294119c70cdfa055ed173baf5111940.png");
            width: 473px;
            height: 97px;
            display: inline-block;
        }

        @keyframes wave-animation {
            0% {
                background-position: 0 bottom;
            }

            100% {
                background-position: 200px bottom;
            }
        }

        @keyframes loading-animation {
            0% {
                background-size: 200px 0px;
            }

            100% {
                background-size: 200px 200px;
            }
        }

        .wave {
            background-image: url("css/uFpLbYt_b.png");
            -moz-background-clip: text;
            -o-background-clip: text;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0px 0px rgba(255, 255, 255, 0.06);
            animation: wave-animation 1s infinite linear, loading-animation 10s infinite linear alternate;
            background-size: 200px 100px;
            background-repeat: repeat-x;
            opacity: 1;
        }

        .wave-2 {
            -moz-background-clip: initial;
            -o-background-clip: initial;
            -webkit-background-clip: initial;
            background-clip: initial;
            display: inline-block;
        }
    </style>

</head>

<body class="home">



    <div id="preloader">
        <div class="preloader_spinner"></div>
    </div>

    <header>

        <div class="romana_header_bottom">
            <div class="container" style="width: 100%;">
                <div class="row" style="width: 100%;">
                    <div class="col-sm-14">

                        <div class="row ">
                            <div class="col-sm-2 bi-menu" style="top: 0px;">
                                <div class="romana_single_plan text-center">
                                    <div class="-icon1 hvr-grow">
                                        <img src="images/503d269759ee3d6df27b329e4e166d224f4ade22.jpg" alt="icon">
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-2 bi-menu">
                                <div class="romana_single_plan text-center">
                                    <div class=" hvr-grow">
                                        <a href="#"><img src="images/choose_icon6.png" class="menu-img" alt="icon"></a>
                                    </div>
                                    <h3>首页</h3>

                                </div>
                            </div>
                            <div class="col-sm-2 bi-menu">
                                <div class="romana_single_plan text-center">
                                    <div class=" hvr-grow">
                                        <a href="#"><img src="images/choose_icon3.png" class="menu-img" alt="icon"></a>
                                    </div>
                                    <h3>动液面测量</h3>

                                </div>
                            </div>
                            <!-- column End -->
                            <div class="col-sm-2 bi-menu">
                                <div class="romana_single_plan text-center">
                                    <div class=" hvr-grow">
                                        <a href="#"><img src="images/choose_icon2.png" class="menu-img" alt="icon"></a>
                                    </div>
                                    <h3>动液面配置</h3>

                                </div>
                            </div>
                            <!-- column End -->
                            <div class="col-sm-2 bi-menu">
                                <div class="romana_single_plan text-center">
                                    <div class=" hvr-grow">
                                        <a href="#"><img src="images/choose_icon4.png" class="menu-img" alt="icon"></a>
                                    </div>
                                    <h3>动液面异常</h3>

                                </div>
                            </div>

                            <div class="col-sm-2 bi-menu">
                                <div class="romana_single_plan text-center">
                                    <div class=" hvr-grow">
                                        <a href="#"><img src="images/choose_icon6.png" class="menu-img" alt="icon"></a>
                                    </div>
                                    <h3>系统管理</h3>

                                </div>
                            </div>
                            <div class="col-sm-2 bi-menu">
                                <div class="romana_single_plan text-center">
                                    <div class=" hvr-grow">
                                        <a href="#"><img src="images/choose_icon5.png" class="menu-img" alt="icon"></a>
                                    </div>
                                    <h3>日志消息</h3>

                                </div>
                            </div>
                            <div class="col-sm-2 bi-menu">
                                <div class="romana_single_plan text-center">
                                    <div class=" hvr-grow">
                                        <h3>系统管理员</h3>
                                    </div>
                                    <button class="button">登出</button>

                                </div>
                            </div>
                            <div class="col-sm-3 " style="width: 350px;">
                                <div class="romana_single_plan text-center">
                                    <div class=" hvr-grow">
                                        <h2 style="color:  red;">长庆油田第十一采油厂油井动液面在线监测</h3>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>


    <div class="romana_why_choose_area ">
        <div class="container" style="width: 100%;">
            <div class="row">
                <div class="col-md-4 col-sm-5 col-xs-12">
                    <div class="tree" style="background-color: #f3eeee;height:700px;overflow-y:auto">
                        <ul>
                            <li>
                                <span><i class="icon-calendar"></i> 项目一</span>
                                <ul>
                                    <li>
                                        <span class="badge badge-success"><i class="icon-minus-sign"></i> 子项1</span>
                                        <ul>
                                            <li>
                                                <a href=""><span><i class="icon-time"></i> 8.00</span> &ndash;
                                                    子项子项1.1</a>

                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span class="badge badge-success"><i class="icon-minus-sign"></i> 子项2</span>
                                        <ul>
                                            <li>
                                                <a href=""><span><i class="icon-time"></i> 8.00</span> &ndash;
                                                    子项子项2.1</a>
                                            </li>
                                            <li>

                                                <a href=""><span><i class="icon-time"></i> 8.00</span> &ndash;
                                                    子项子项2.2</a>
                                            </li>
                                        </ul>

                                    </li>

                                    <li>

                                        <span class="badge badge-success"><i class="icon-minus-sign"></i> 子项3</span>

                                        <ul>

                                            <li>

                                                <a href=""><span><i class="icon-time"></i> 8.00</span> &ndash;
                                                    子项子项3.1</a>
                                            </li>
                                            <li>

                                                <a href=""><span><i class="icon-time"></i> 8.00</span> &ndash;
                                                    子项子项3.2</a>
                                            </li>
                                        </ul>

                                    </li>

                                </ul>

                            </li>



                        </ul>

                    </div>
                </div>
                 <!-- <div class="col-xs-4" >
                    <div style="width: 100%;height:400px;margin-top: 10px;">
                        <img src="images/2020_04_26 144238.gif" style="width: 100%;height:100%;" alt="icon">
                    </div>
                    <div class="loading wave" style="width: 140px;left: 70%;top:260px;">
                        🛢️
                    </div>
                </div>
                <div class="col-xs-4" style="height: 380px;padding-top: 20px;" >
                    <div id="container-charts" style="height: 380px;"></div>
                </div>
                <div class="col-xs-4" style="height: 300px;">
                    <div id="container-bar" style="height: 300px;"></div>
                </div> -->
                <div class="col-xs-8" >
                    <div style="width: 100%;height:400px;margin-top: 10px;">
                        <img src="images/2020_04_26 144238.gif" style="width: 100%;height:100%;" alt="icon">
                    </div>
                    <div class="loading wave" style="width: 140px;left: 70%;top:260px;">
                        🛢️
                    </div>
                </div>
                <div class="col-xs-4" style="height: 380px;padding-top: 20px;" >
                    <div id="container-charts" style="height: 380px;"></div>
                </div>
                <div class="col-xs-4" style="height: 300px;">
                    <div id="container-bar" style="height: 300px;"></div>
                </div>
            </div>


        </div>
    </div>


    <footer class="romana_footer_area">
        <div class="romana_header_top">
            <div class="container">
                <div class="row">
                    <div class="">
                        <div class="romana_header_top_left" style="text-align: center;">
                            <a href="#" class="hidden-xs"><i class="icofont icofont-phone"></i>陕西瀚林中信石油工程设备有限公司 联系电话
                                ：029-86528939</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </footer>

    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/active.js"></script>

    <script type="text/javascript">
        $(function () {
            $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
            $('.tree li.parent_li > span').on('click', function (e) {
                var children = $(this).parent('li.parent_li').find(' > ul > li');
                if (children.is(":visible")) {

                    children.hide('fast');

                    $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');

                } else {
                    children.show('fast');
                    $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
                }
                e.stopPropagation();
            });

        });

    </script>


    <!--echarts-->
    <script src="js/echarts.min.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container-charts");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            title: {
                text: '标题',
                subtext: '子标题',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['内容1', '内容2', '内容3']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '45%',
                    center: ['50%', '50%'],
                    data: [
                        { value: 234, name: '内容1' },
                        { value: 135, name: '内容2' },
                        { value: 1548, name: '内容3' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        ;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
    <script type="text/javascript">
        var dom = document.getElementById("container-bar");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        };
        ;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
</body>

</html>